<template>
  <Form
    style="width:400px;margin:20px auto;"
    ref="formInline"
    :model="formInline"
    :rules="ruleInline"
    inline
  >
    <FormItem prop="userName">
      <Input type="text" v-model="formInline.userName" placeholder="用户名">
        <Icon type="ios-person-outline" slot="prepend"></Icon>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" v-model="formInline.password" placeholder="密码">
        <Icon type="ios-lock-outline" slot="prepend"></Icon>
      </Input>
    </FormItem>
    <div>
      <FormItem>
        <Button
          type="primary"
          style="margin-right:10px;"
          @click="handleSubmit('formInline',false)"
        >登录</Button>
        <Button type="primary" @click="handleSubmit('formInline',true)">注册</Button>
      </FormItem>
    </div>
  </Form>
</template>
<script>
import { getUsers, addUser, getAccount } from '@/api/user'
export default {
  data () {
    return {
      formInline: {
        userName: '',
        password: ''
      },
      ruleInline: {
        userName: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { type: 'string', min: 6, message: '密码最小长度为6位数', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit (name, type) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (type) {
            // 注册
            getUsers({
              userName: this.formInline.userName
            }).then(res => {
              if (res.code === 1 && res.data.length > 0) {
                this.$Message.error('账号名已存在！')
              } else {
                addUser({
                  userName: this.formInline.userName,
                  password: this.formInline.password
                }).then(res => {
                  if (res.code === 1) {
                    this.$Message.success('注册成功！')
                  } else {
                    this.$Message.error('注册失败！')
                  }
                }).catch(err => {
                  console.log(err)
                })
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            // 登录
            getUsers({
              userName: this.formInline.userName,
              password: this.formInline.password,
              state: 1
            }).then(res => {
              if (res.code === 1 && res.data.length > 0) {
                getAccount({
                  userId: res.data[0].id
                }).then(accres => {
                  if (accres.code === 1) {
                    this.$store.commit('setUserInfo', res.data[0])
                    this.$store.commit('setAccount', accres.data.balance)
                    this.$router.push({
                      name: 'home'
                    })
                  } else {
                    this.$Message.error(accres.message)
                  }
                }).catch(accerr => {
                  this.$Message.error(accerr)
                })
              } else {
                this.$Message.error('账号密码错误！')
              }
            }).catch(err => {
              console.log(err)
            })
          }
        }
      })
    }
  }
}
</script>
